@import "variables";
goods-coupon{
  seed-toolbar-header{
    position: relative;
    margin-bottom: pxTorem(30);
  }

  .coupon-explain{
    @include icon(40, 40, '#{$icons-path}/coupon_explain.png');
    position: absolute;
    top: pxTorem(30);
    left: pxTorem(30);
  }

  .coupon-search{
    width: 100%;
    position: relative;
    margin-bottom: pxTorem(30);
    font-size: pxTorem(28);
    padding: pxTorem(30) pxTorem(20) 0;
    .coupon-input-icon{
      @include icon(32, 30, '#{$icons-path}/coupon_input.png');
      position: absolute;
      top: pxTorem(48);
      left: pxTorem(40);
    }
    input{
      border: pxTorem(1) solid color($h5,c8);
      height: pxTorem(68);
      -webkit-appearance: none;
      text-indent: pxTorem(72);
      border-radius: pxTorem(5);
    }
    input::placeholder{
      color: color($h5,c4);
    }
    .coupon-exchange{
      line-height: pxTorem(68);
      padding: 0 pxTorem(35) 0 pxTorem(40);
      color: color($h5,c1);
    }
  }
  .coupons-list{
    padding: 0 pxTorem(20);
  }
  seed-modal{
    .seed-modal-dialog{
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }

  .couponWrap{
    margin: 0 pxTorem(30) 0;
    padding: pxTorem(20);
    border-radius: pxTorem(10);
    background: color($h5,c10);
    position: relative;
    .modal-close-btn{
      position: absolute;
      top: pxTorem(20);
      right: pxTorem(20);
      @include icon(40px,40px,'#{$icons-path}/event_wrong.png');
    }
    .coupon-exchange-title {
      text-align: center;
      @include font-dpr(30px);
      @include set-color(c3);
      line-height: pxTorem(30);
      margin-top: pxTorem(20);
      margin-bottom: pxTorem(56);
    }
    seed-coupon-card .coupon-card {
      margin-bottom: pxTorem(20);
    }
  }

}
